<template>
    <!--地图挂载dom-->
    <div id="map">
        <div id="map2d">
        </div>
        <div id="map3d">
        </div>
    </div>

</template>

<script>
    //引入依赖
    import {Map, View} from 'ol'
    import XYZ from 'ol/source/XYZ'
    import TileLayer from 'ol/layer/Tile'
    import * as Cesium from "cesium";
    import OLCesium from 'ol-cesium';

    export default {
        name: 'ProjectOlCesium',
        props: {
            msg: String
        },
        mounted() {
            //cesium全局化
            window.Cesium = Cesium;
            this.$nextTick(() => {
                //初始化地图
                let map = new Map({
                    target: 'map2d',//指定挂载dom，注意必须是id
                    layers: [
                        new TileLayer({
                            source: new XYZ({
                                url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnline' +
                                    'StreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
                            })
                        })
                    ],
                    //配置视图
                    view: new View({
                        center: [113.24981689453125, 26.126468438108688],   //视图中心位置
                        projection: "EPSG:4326", //指定投影
                        zoom: 5   //缩放到的级别
                    })
                });
                const ol3d = new OLCesium({map: map, target: 'map3d'}); // ol2dMap is the ol.Map instance
                ol3d.setEnabled(true);
            })
        },
        methods: {}
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
    }

    #map2d {
        width: 50%;
        height: 100%;
    }

    #map3d {
        position: relative;
        width: 50%;
        height: 100%;
    }
</style>
